<template>
	<view class="invoice-page">
		<!-- 发票列表 -->
		<view class="invoice-list">
			<view class="invoice-item" v-for="(item, index) in invoiceList" :key="item.id">
				<text class="tag" v-if="item.defaultFlag">默认</text>
				<view class="item-header flex flex-between" @tap="select(index)">
					<text class="title">{{item.invoiceTitle}}</text>
					<text class="type">{{item.titleType}}</text>
				</view>
				
				<view class="flex flex-between">
					<view class="flex flex-column" @tap="select(index)">
						<view class="company">{{item.regAddress || '-'}}</view>
						<view class="number">{{item.taxpayerNo}}</view>
					</view>
					<view class="options flex">
						<view class="flex" @tap="editInvoice(item)">
							<u-icon name="edit-pen" color="#AAAAAA"></u-icon>
							<text class="edit">编辑</text>
						</view>
						<view class="flex" @tap="deleteInvoice(item)" style="margin-left: 20rpx;">
							<u-icon name="trash" color="#AAAAAA"></u-icon>
							<text class="edit">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<u-empty v-if="invoiceList.length === 0" text="暂无发票" mode="data"></u-empty>
		
		<!-- 加载更多 -->
		<u-loadmore :status="loadMoreStatus" v-if="invoiceList.length > 0"/>
		
		<view style="height: 120rpx;"></view>
		
		<!-- 添加发票按钮 -->
		<view class="footer">
			<u-button color="#1C6EFB" shape="circle" text="新增发票抬头" @click="toAddInvoice"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invoiceList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				loadMoreStatus: 'loading', // loadmore 组件的状态
				isLoading: false, // 是否正在加载数据
				type: ''
			}
		},
		onLoad({ type }) {
			this.type = type;
		},
		onShow() {
			this.resetAndLoadList()
		},
		onPullDownRefresh() {
			this.resetAndLoadList()
		},
		onReachBottom() {
			this.loadMoreData()
		},
		methods: {
			select(index) {
				if (!this.type) return;
				uni.$emit('invoiceSelect', this.invoiceList[index]);
				uni.navigateBack()
			},
			
			// 重置列表并加载数据
			resetAndLoadList() {
				this.pageNo = 1
				this.isLoading = false
				this.invoiceList = []
				this.getInvoiceTitleList()
			},
			
			// 获取发票列表
			getInvoiceTitleList() {
				if (this.isLoading) return
				
				this.isLoading = true
			    this.$http_api.getInvoiceTitleList({ 
					pageNo: this.pageNo,
					pageSize: this.pageSize 
				}).then(res => {
					const { records, total, current, pages } = res
					
					// 追加数据
					this.invoiceList = this.pageNo === 1 
						? records 
						: [...this.invoiceList, ...records]
					
					this.total = total
					
					// 更新加载状态
					this.loadMoreStatus = current >= pages ? 'nomore' : 'loadmore'
				}).finally(() => {
					this.loadMoreStatus = 'nomore'
				})
			},
			
			// 加载更多数据
			loadMoreData() {
				if (this.loadMoreStatus === 'nomore' || this.isLoading) return
				
				this.pageNo++
				this.getInvoiceTitleList()
			},
			
			// 编辑发票
			editInvoice(item) {
				uni.navigateTo({
					url: '/pages/user/users/invoice/add?id=' + item.id
				})
			},
			
			// 删除发票
			deleteInvoice(item) {
				uni.showModal({
					title: '提示',
					content: '确定删除该发票抬头吗？',
					success: res => {
						if (res.confirm) {
							this.deleteItem(item.id)
						}
					}
				})
			},
			
			deleteItem(id) {
				this.$http_api.delInvoiceTitle({ id }).then(res => {
					this.resetAndLoadList()
				})
			},
			
			// 跳转添加发票页面
			toAddInvoice() {
				uni.navigateTo({
					url: '/pages/user/users/invoice/add'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.invoice-page {
		padding: 20rpx;
		
		.invoice-list {
			.invoice-item {
				background: #FFFFFF;
				border-radius: 28rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;
				
				.tag {
					padding: 6rpx 18rpx;
					background: #FF4600;
					border-radius: 4rpx;
					font-size: 22rpx;
					color: #fff;
					font-family: "PINGFANG";
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 28rpx 0 28rpx 0;
				}
				
				.item-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid #eee;
					padding: 20rpx 0;
					
					.title {
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
						margin-right: 20rpx;
						font-family: "PINGFANG";
					}
					
					.type {
						font-family: "PINGFANG";
						font-weight: 600;
						font-size: 26rpx;
						color: #777777;
					}
				}
			}
		}
				
		.edit {
			color: #AAA;
			font-size: 24rpx;
			font-family: "PINGFANG";
			font-weight: 400;
		}
		
		.company, .number {
			font-weight: 600;
			color: #333333;
			font-size: 24rpx;
			font-family: "PINGFANG";
			align-self: flex-start;
		}
		
		.number {
			font-size: 22rpx;
			color: #AAA;
		}
		
		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			padding: 20rpx 40rpx;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}
	}
</style>